<!doctype html>
<html class="no-js fixed-layout">
<head>
    <!-- 公共head Begin -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
    <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
    <!-- minimum-scale=1.0, maximum-scale=1.0 不加这两个在iPhone浏览器下点击缩小了的输入框会使整个页面变大 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>萌宠之家-C2B2C社会化电商平台</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="statics/img/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="statics/img/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
    <link rel="apple-touch-icon-precomposed" href="statics/img/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="statics/img/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="statics/AmazeUI/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="statics/AmazeUI/assets/css/shop.css">

    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="statics/AmazeUI/assets/js/jquery.min.js"></script>
    <!--<![endif]-->

    <script src="statics/js/plugin/jquery.cookie.js"></script>

    <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用 -->
    <script src="statics/js/plugin/jquery.form.js"></script>

    <script src="statics/js/jquery.lSelect.js"></script>
    <script src="statics/js/plugin/jquery.metadata.js"></script>
    <script src="statics/js/plugin/jqPaginator.min.js"></script>
    <script src="statics/js/product.js"></script>
    <!-- 公共head End -->
</head>
<body>
<div class="am-cf shop-main" style="padding-top:0px;">
    <!-- sidebar start -->
    <a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only shop-menu" data-am-offcanvas="{target: '#shop-offcanvas'}"></a>
    <div class="sidebar shop-sidebar am-offcanvas" id="shop-offcanvas"></div>
    <!-- sidebar end -->

  <!-- content start -->
  <div class="shop-content">
    <div class="shop-content-body">
      <ol class="am-breadcrumb am-margin-left am-margin-bottom-0">
        <li><span class="am-icon-star am-icon-fw"> </span>萌宠管理</li>
        <li class="am-active">粉丝列表</li>
      </ol>
      <div class="am-panel am-panel-default am-text-xs am-margin-horizontal-sm">
        <div class="am-panel-bd am-g am-padding-0 am-scrollable-horizontal">
          <table id="tblFollowList" class="am-table am-table-bordered am-table-striped am-table-hover am-text-nowrap am-text-xs am-margin-bottom-0">
            <thead>
              <tr>
                <th>粉丝用户名</th>
			    <th>萌宠数量</th>
                <th>粉丝数量</th>
			    <th>收藏数量</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
          <div id="noData" style="display: none;" class="am-kai am-text-center am-margin">
            <h3>没有找到任何记录!</h3>
          </div>
        </div>
          <!-- 分页 -->
          <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
          <div id="divPagination" class="am-margin-left am-text-xs">
              <ul id="pagination" class="am-pagination"></ul>
          </div>
      </div>
    </div>
  </div>
  <!-- content end -->
</div>
</body>
<script src="statics/AmazeUI/assets/js/amazeui.min.js"></script>
<script src="statics/AmazeUI/assets/js/amazeui.modal.js"></script>
<script src="statics/js/base.js"></script>
<script src="statics/AmazeUI/assets/js/validator.js"></script>

<script type="text/javascript">

    // '商品分类'列表
    let categoryList = new Array();

    // '我的粉丝'列表
    let followList = new Array();

    let jsonUser;
    let token;

    // '查询条件'对象
    let queryObject = new Object();

    $(function(){

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("user");
        token = sessionStorage.getItem("token");

        if(!jsonUser || !token) {
            top.location.href = 'login.html';
            return;
        }

        // 加载公共侧边栏模板
        $('.sidebar').load('sidebar.html');

        // 加载'商品分类'列表
        loadCategoryList();

        // 加载'我的粉丝'列表数据
        loadFollowList();

    });// $(function());

/**	加载'商品分类'列表数据 **/
function loadCategoryList() {

    // 加载'商品分类'数据
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8080/category/getAll',
        async: false,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            categoryList = result.data;

        }// success();

    });// $.post();

}// loadCategoryList();

/**	加载'我的粉丝'列表数据 **/
function loadFollowList() {

    // 加载'商品列表'数据
    $.post('http://localhost:8080/follow/fans',
        {
            token: token,
            queryObject: queryObject

        }, function (result) {

            // 如果返回的是token失效，就重新登录
            if(result.code == 419) {

                Modal.confirm('当前会话token失效，请重新登录页面！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'login.html';
                    },
                    onCancel: function() {
                        top.location.href = 'login.html';
                    }
                });// Modal.confirm();

                return;
            }// if(result.code == 419);

            // 如果返回的数据的响应码不是'成功(200)'
            if(result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            let pageResult = result.data;

            followList = pageResult.list;

            // 填充表格数据
            fillFollowList();

            // 初始化分页插件
            $("#pagination").remove();
            $("#divPagination").append('<ul id="pagination" class="am-pagination"></ul>');

            $.jqPaginator( '#pagination', {
                totalPages: pageResult.pages,
                totalCounts:pageResult.total,
                visiblePages: 10,
                currentPage: pageResult.pageNum,
                prev: '<li><a href="javascript:void(0);"><span class="am-icon-arrow-circle-left"></span> 上一页</a></li>',
                next: '<li><a href="javascript:void(0);">下一页 <span class="am-icon-arrow-circle-right"></span></a></li>',
                page: '<li><a href="javascript:void(0);">{{page}}</a></li>',
                activeClass: 'am-active',
                onPageChange:function( num, type ){

                    // 加载指定页码数据
                    if (type == 'change'){
                        queryObject.currentPage = num;
                        loadFollowList();
                    }

                }// onPageClick();

            });// $("#pagination").twbsPagination();

            $("#pagination").append('<li>共' + pageResult.pages + '页</li>');

    });// $.post();

}// loadFollowList();

/** 填充表格数据 **/
function fillFollowList( ) {

    // 清空表格数据
    $('#tblFollowList tbody').empty();

    // 隐藏显示提示
    $('#noData').hide();

    // 如果没有集合数据，就直接返回
    if( !followList || followList.length == 0 ){
        // 设置没有数据提示
        $('#noData').show();
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < followList.length; i++ ) {

        let follow = followList[i];

        // 粉丝用户名
        let tdName = '<td class="am-text-middle"><strong><a target="_blank" href="seller_item_list.html?id=' + follow.userId
                        + '">' + follow.user.username + '</a></strong></td>';

        // 在售宠物数量
        let tdOnSalePetNum = '<td class="am-text-middle am-text-warning"><strong>' + follow.user.onsalePetNum + '</strong></td>';

        // 粉丝数量
        let tdFansNum = '<td class="am-text-middle am-text-secondary"><strong>' + follow.user.fansNum + '</strong></td>';

        // 收藏数量
        let tdFollowNum = '<td class="am-text-middle am-text-success"><strong>' + follow.user.followNum + '</strong></td>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblFollowList tbody').append('<tr>' + tdName + tdOnSalePetNum + tdFansNum + tdFollowNum + '</tr>');

    }// for();

}// fillFollowList();

// 单行删除
function deleteOne( followId ) {

    Modal.register(['confirm','alert']);
    Modal.confirm("您确定要删除吗？",{
        relatedTarget: this,
        onConfirm: function(options) {
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/follow/delete',
                dataType: "json",
                async: false,
                data: { token: token, followId: followId},
                success: function( result ) {

                    // 如果返回的数据的响应码不是'成功(200)'
                    if (result.code != 200) {
                        Modal.alert(result.msg);
                        return;
                    }

                    // 如果返回的数据响应码为200
                    Modal.alert('删除成功！');

                    // 重新加载购物车列表
                    loadFollowList();

                }// success: function( result );
            });
        }// onConfirm: function(options);
    });
}// deleteOne( cartId );

/** 根据商品分类id，获取商品分类路径信息 **/
function getCategoryPath( categoryId ) {

    // 分类路径
    let categoryPath = "";

    // 父分类id
    let parentCategoryId;

    // 子分类名称
    let childCategoryName;

    // 循环查找父分类id
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的id，等于传入的分类id
        if( category.id == categoryId ){
            // 设置父分类id
            parentCategoryId = category.parentId;
            // 设置子分类名称
            childCategoryName = category.name;
            break;
        }

    }// for();

    // 循环查找父分类名称
    for( let i = 0; i < categoryList.length; i++ ) {

        let category = categoryList[i];

        // 如果当前分类的父id，等于找到的父分类id
        if( category.id == parentCategoryId ){
            // 设置当前父分类名称路径
            categoryPath = category.name + '&nbsp;->&nbsp;' + childCategoryName;
            break;
        }

    }// for();

    return categoryPath;


}// getCategoryPath( categoryId );

</script>
</html>